// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var salvProName = ['北京', '深圳', '三亚', '厦门', '苏州', '青岛', '珠海', '大连', '南京', '广州', '佛山',
    '海口', '福州', '武汉', '南宁', '长沙', '无锡', '兰州', '湛江', '东莞', '常州', '重庆',
    '济南', '长春', '泉州', '昆山', '沈阳', '盐城', '哈尔滨', '郑州', '南通', '赣州', '中山',
    '呼和浩特', '海门', '贵阳', '柳州', '江门', '常德', '上饶', '威海', '合肥', '宜昌', '襄阳',
    '岳阳', '开封', '惠州', '株洲', '桂林', '洛阳', '漳州', '南昌', '石家庄', '烟台', '赤峰市',
    '唐山', '吉安', '菏泽', '清远', '包头', '澄迈', '廊坊', '驻马店', '鄂州', '淮安', '黄石',
    '徐州', '济宁', '信阳 ', '九江', '北海', '泰安', '潍坊', '马鞍山', '临沂', '丹东',
    '张家口', '新乡', '芜湖', '周口', '镇江', '淄博', '银川', '吉林', '宝鸡', '许昌', '巴中',
    '安庆', '保定', '防城港'
];
var salvProValue = ['13281.0', '11123.0', '7058.0', '6078.0', '5502.0', '5160.0',
    '5020.0', '4135.0', '3942.0', '3876.0', '3625.0', '3388.0',
    '3356.0', '3163.0', '3127.0', '3120.0', '3110.0', '3107.0',
    '3063.0', '2922.0', '2880.0', '2830.0', '2825.0', '2751.0',
    '2748.0', '2732.0', '2625.0', '2604.0', '2582.0', '2582.0',
    '2532.0', '2474.0', '2449.0', '2433.0', '2408.0', '2395.0',
    '2347.0', '2343.0', '2335.0', '2261.0', '2212.0', '2191.0',
    '2112.0', '2092.0', '2085.0', '2056.0', '2053.0', '2047.0',
    '2039.0', '2039.0', '2038.0', '2029.0', '2023.0', '1990.0',
    '1924.0', '1924.0', '1890.0', '1882.0', '1860.0', '1849.0',
    '1842.0', '1832.0', '1766.0', '1752.0', '1737.0', '1723.0',
    '1722.0', '1697.0', '1686.0', '1669.0', '1665.0', '1665.0',
    '1659.0', '1647.0', '1637.0', '1606.0', '1586.0', '1544.0',
    '1537.0', '1530.0', '1525.0', '1518.0', '1484.0', '1448.0',
    '1443.0', '1443.0', '1379.0', '1276.0', '1252.0', '1201.0'
];
var salvProMax = []; //背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0])
}
option = {
    backgroundColor: "#003366",
    grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        top: '2%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
        }
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: salvProName
    }, {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: '6'
            },
        },
        data: salvProValue
    }],
    series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 6,
            data: salvProValue
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 6,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
                normal: {
                    color: 'rgba(24,31,68,1)',
                    barBorderRadius: 30,
                }
            },
        },
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);